<template>
    房型名称：
    <input type="text" v-model="name">
    <input type="button" value="查询" @click="show(),page.pageindex=1">
    <table border="1">
        <thead>
            <tr>
                <td>房型名称</td>
                <td>单价（元）</td>
                <td>室内面积（平方米）</td>
                <td>最多入住人数</td>
                <td>图片</td>
                <td>房型描述</td>
                <td>是否有窗</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.htname}}</td>
                <td>{{item.htprice}}</td>
                <td>{{item.htsize}}</td>
                <td>{{item.peonum}}</td>
                <td><img :src="item.picture" style="width: 120px;height: 110px;"></td>
                <td>{{ item.prescribe }}</td>
                <td>{{item.windows?"有窗户":"没窗户"}}</td>
                <td>
                    <a href="#" @click="jump(item.htid)">修改</a>&nbsp;
                    <a href="#" @click="del(item.htid)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <a href="#" @click="fen(1)">首页</a>&nbsp;
    <a href="#" @click="fen(page.pageindex-1)">上一页</a>&nbsp;
    <a href="#" @click="fen(page.pageindex+1)">下一页</a>&nbsp;
    <a href="#" @click="fen(page.zongpage)">尾页</a>&nbsp;
    当前第{{ page.pageindex }}/{{ page.zongpage }}页
    每页 {{ page.pagesize }} 行
    总共 {{ page.zonghang }} 行
</template>
<script setup lang="ts">
import {ref} from 'vue'
import { onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
onMounted(()=>{
    show();
})
const del=(id:number)=>{
    if(confirm('Are you sure?')){
        axios.get('http://localhost:46564/api/House/DelType',{
            params:{
                id:id
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功');
                show();
            }
            else{
                alert('删除失败');
            }
        })
        .catch(error=>{
            console.log(error);
        })
    }
}
const ror=useRouter();
const jump=(id:number)=>{
    ror.push({
        name:'UpdType',
        params:{
            id:id
        }
    })
}
const fen=(p:number)=>{
    if(p>=1&&p<=page.value.zongpage){
        page.value.pageindex=p;
        show();
    }
    else{
        alert('页码有误');
        return;
    }
}
const info=ref([{
    "htid": 0,
    "htname": "",
    "htprice": "",
    "htsize": "",
    "peonum": "",
    "picture": "",
    "prescribe": "",
    "windows": true,
    "tisdel": 0
}])
const page=ref({
    zonghang:0,
    zongpage:0,
    pagesize:2,
    pageindex:1
})
const name=ref('');
const show=()=>{
    axios.get('http://localhost:46564/api/House/ShowType',{
        params:{
            name:name.value,
            pageindex:page.value.pageindex,
            pagesize:page.value.pagesize
        }
    })
    .then(res=>{
        page.value.zonghang=res.data.zonghang
        page.value.zongpage=res.data.zongpage
        info.value=res.data.plist
    })
    .catch(error=>{
        console.log(error);
    })
}
</script>